<template>
	<view class="code-warp" :class="{'blue-theme':blueTheme}">
		<view class="imageBox" :class="{'blue-theme':blueTheme}" v-if="!isPay">
			<view class="image-box">
				<image :src="imgUrl" class="code-image" mode="aspectFit" v-if="imgUrl" @click="getPayCodeImg"></image>

				<view class="code-image" v-else-if="!isPay">
					<text class="cuIcon-qr_code "></text>
				</view>
				<!-- 	<view class="is-pay" :class="{active:isPay&&codeUrl}">
					<text class="cuIcon-check text-blue"></text>
					<text class="tip">支付成功！</text>
				</view> -->
			</view>
			<view class="code-tip" v-if="codeUrl" @click="getPayCodeImg">
				每分钟自动刷新<text class="cuIcon-refresh margin-left-xs"></text>
			</view>
		</view>
		<view class="pay-tip" :class="{'blue-theme':blueTheme}" v-if="isPay">
			<view class="icon">
				<text class="cuIcon-check "></text>
			</view>
			<view class="text text-blue">
				支付成功
			</view>
		</view>
		<view class="order-info" :class="{'blue-theme':blueTheme}" v-if="orderInfo">
			<view class="order-item ">
				<view class="label">订单编号</view>
				<view class="value">
					{{orderInfo.order_no}}
				</view>
			</view>
			<view class="order-item ">
				<view class="label">订单状态</view>
				<view class="value">
					{{orderInfo.order_status}}
				</view>
			</view>
			<view class="order-item ">
				<view class="label">订单金额</view>
				<view class="value">
					￥ {{orderInfo.money_total}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	var timer = null
	var timer2 = null
	export default {
		data() {
			return {
				id: '',
				orderInfo: null,
				codeUrl: '',
				blueTheme: false
			}
		},
		computed: {
			isPay() {
				if (this.orderInfo && this.orderInfo.pay_status === '已支付') {
					return true
				}
			},
			imgUrl() {
				if (this.codeUrl) {
					return `${this.$api.serverURL}/wx/bxsys/qrcode?content=${encodeURI(this.codeUrl)}&width=600`
				}
			}
		},
		onUnload() {
			clearInterval(timer)
			clearInterval(time2)
		},
		beforeDestroy() {
			clearInterval(timer)
			clearInterval(time2)
		},
		methods: {
			async getPayCodeImg() {
				// 微信下单
				// const appNo = 'APPNO20200107181133'
				const appNo = 'APPNO20210630161035'
				// const mchID = '1485038452'
				const mchID = this.$api.mchID
				const url = this.$api.serverURL + '/wx/operate/srvwx_native_order'
				const req = [{
					serviceName: 'srvwx_native_order',
					data: [{
						app_no: appNo,
						wx_mch_id: mchID,
						out_trade_no: this.orderInfo.order_no, //订单号
						total: this.orderInfo.money_total * 100, //订单金额 单位分
						notify_url: `https://srvms.100xsys.cn/wx/notify/v3/payment/${appNo}/${mchID}`,
						description: "订单商品描述", //订单商品描述，会在支付页面显示
					}]
				}]
				const res = await this.$http.post(url, req)
				// .then(res => {
				if (res.data.state === "SUCCESS" && Array.isArray(res.data?.response) && res.data.response
					.length > 0 && res.data.response[0]
					.response && res.data.response[0].response.code_url) {
					this.codeUrl = res.data.response[0].response.code_url
				} else {
					uni.showToast({
						title: res.data.resultMessage,
						icon: 'none',
						duration: 3000,
						mask: true
					})
					clearInterval(timer2)
					clearInterval(timer)
				}
				return this.codeUrl
				// })
			},
			async getOrderInfo() {
				const url = this.$api.serverURL + '/fyzhmd/select/srvstore_shop_order_select'
				const req = {
					"serviceName": "srvstore_shop_order_select",
					"colNames": ["*"],
					"condition": [{
						colName: "id",
						ruleType: 'eq',
						value: this.id
					}],
					"page": {
						"pageNo": 1,
						"rownumber": 1
					},
				}
				const res = await this.$http.post(url, req)
				// .then(res => {
				if (Array.isArray(res.data.data) && res.data.data.length > 0) {
					this.orderInfo = res.data.data[0]
					return res.data.data[0]
				}
				// })
			},
		},
		onLoad(option) {
			if (option.id) {
				this.id = option.id
				this.getOrderInfo().then(res => {
					if (this.orderInfo && this.orderInfo.pay_status === '未支付') {
						this.getPayCodeImg().then(url => {
							if (url) {
								timer2 = setInterval(() => {
									this.getPayCodeImg()
								}, 1000 * 60)
							}
						})
					}

				})
				timer = setInterval(() => {
					this.getOrderInfo()
				}, 2000)
			}
			if (option.blue) {
				this.blueTheme = true
			}
		},
	}
</script>


<style scoped lang="scss">
	.code-warp {
		&.blue-theme {
			background-color: #0055FF;
			padding: 20rpx;
		}

		padding-top: 20rpx;
		height: calc(100vh - var(--window-top) - var(--window-bottom));
		display: flex;
		flex-direction: column;
		overflow: auto;
	}

	.pay-tip {
		text-align: center;
		font-size: 40rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-color: #fff;
		padding: 100rpx;

		&.blue-theme {
			border-radius: 20rpx;
		}

		.icon {
			font-size: 150rpx;
			width: 200rpx;
			height: 200rpx;
			border-radius: 50%;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: #0055FF;
			color: #fff;
			box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
			margin-bottom: 40rpx;
		}

	}

	.order-info {
		width: 100%;
		padding: 20rpx;
		margin-top: 20rpx;
		color: #333;
		background-color: #fff;
		margin-bottom: 50rpx;

		&.blue-theme {
			color: #fff;
			background: rgba($color: #fff, $alpha: 0.2);
			border-radius: 20rpx;
		}

		.order-item {
			display: flex;
			margin: 0 40rpx 10rpx;
			align-items: center;
			padding: 30rpx 0;
			border-bottom: 1px solid #f1f1f1;

			.label {
				width: 40%;
			}

			.value {
				flex: 1;
				text-align: right;
			}
		}
	}

	.imageBox {
		// padding: calc((100vh - var(--window-top) - var(--window-bottom) - 700rpx)/2) calc((100vw - 610rpx)/2);
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 200rpx 0 100rpx;
		background-color: #fff;

		&.blue-theme {
			border-radius: 20rpx;
		}

		.image-box {
			position: relative;
			// padding: 10rpx;
			// border: 2px solid #000;
			padding: 20rpx;
			border: 20rpx solid #000;
			text-align: center;

		}

		.code-tip {
			padding: 20rpx 0 0;
		}


		.code-image {
			width: 400rpx;
			height: 400rpx;
			line-height: 400rpx;
			text-align: center;
			font-size: 120rpx;
		}

		.is-pay {
			width: 0rpx;
			height: 0rpx;
			position: absolute;
			top: 0;
			flex: 0;
			z-index: -10;
			background-color: #fff;
			border: 5rpx solid #0081ff;
			opacity: 1;
			font-size: 180rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			overflow: hidden;

			&.active {
				width: 400rpx;
				height: 400rpx;
				z-index: 10;

				.tip {
					font-size: 40rpx;
					color: #0081ff;
				}
			}
		}
	}
</style>
